<!DOCTYPE html>
<html lang="en">
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="${webRoot}resources/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="${webRoot}resources/css/style.css" rel="stylesheet">
	</head>
<body class="main">
	<div class="wrap data-info">
		<canvas width="800" height="450" id="draw"></canvas>
	</div>			
	<script src="${webRoot}resources/js/jquery-1.9.2.min.js"></script>
	<script src="${webRoot}resources/js/bootstrap.min.js"></script>
	<script src="${webRoot}resources/js/js.js"></script>
	<script type="text/javascript">

		function drawcrile(colors,rs){
			var obj=document.getElementById("draw");
			var ctx=obj.getContext("2d");
			var startAngle=0;
			var endAngle=0;
			for(var i=0;i<colors.length;i++){
				endAngle=startAngle+Math.PI*2*rs[i]/sum(rs);
				ctx.fillStyle=colors[i];
				ctx.strokeStyle=colors[i];
				ctx.beginPath();
				ctx.moveTo(200,150);
				ctx.arc(200,150,100,startAngle,endAngle,false);
				ctx.closePath();  
				ctx.fill();	
				ctx.stroke();
				startAngle=endAngle;		
			}			
		}

		function sum(arr){
			var s=0;
			for(var i=0;i<arr.length;i++){
				s+=arr[i]
			}
			return s;
		}

		function init(){
			var data={
				color:["#d2b3a7","#afc4e1","#c0def8","#2b4c5e"],
				radius:[0.5,1,1.75,2]
			}
			drawcrile(data.color,data.radius);
		}
		window.onload=init();


	</script>
</body>
</html>
